<!--  -->
<template>
  <div class="collapse-site-menu-setup">
    <el-form :model="form" v-loading="loading">
      <el-form-item label="当前站点" :label-width="formLabelWidth" style="margin-bottom: 0;">
        <span style="color: #67C23A;">{{
          currentSite && currentSite.language && currentSite.language.name
        }}</span>
      </el-form-item>
      <el-form-item label="菜单显示级别" :label-width="formLabelWidth" style="margin-bottom: 0;">
        <el-select size="small" v-model="form.maxIndex" placeholder="请选择">
          <el-option :label="'一级'" :value="0"></el-option>
          <el-option :label="'二级'" :value="1"></el-option>
          <el-option :label="'三级'" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-divider content-position="left">一级菜单文字设置</el-divider>
      <el-form-item label="菜单文字颜色" :label-width="formLabelWidth" style="margin-bottom: 8px;">
        <el-color-picker v-model="form.topFontColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="选中文字颜色" :label-width="formLabelWidth" style="margin-bottom: 8px;">
        <el-color-picker v-model="form.topSelectionColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="字体" :label-width="formLabelWidth" style="margin-bottom: 0;">
        <el-select size="small" v-model="form.topFontFamily" placeholder="请选择">
          <el-option :label="'默认'" :value="null"></el-option>
          <el-option v-for="(item, index) in fontFamily" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字号" :label-width="formLabelWidth" style="margin-bottom: 0;">
        <el-select size="small" v-model="form.topFontSize" placeholder="请选择">
          <el-option :label="'默认'" :value="null"></el-option>
          <el-option :label="'0.9em'" :value="'0.9em'"></el-option>
          <el-option :label="'1em'" :value="'1em'"></el-option>
          <el-option :label="'1.1em'" :value="'1.1em'"></el-option>
          <el-option :label="'1.2em'" :value="'1.2em'"></el-option>
          <el-option :label="'1.3em'" :value="'1.3em'"></el-option>
          <el-option :label="'1.4em'" :value="'1.4em'"></el-option>
          <el-option :label="'1.5em'" :value="'1.5em'"></el-option>
          <el-option :label="'1.6em'" :value="'1.6em'"></el-option>
          <el-option :label="'1.7em'" :value="'1.7em'"></el-option>
          <el-option :label="'1.8em'" :value="'1.8em'"></el-option>
          <el-option :label="'1.9em'" :value="'1.9em'"></el-option>
          <el-option :label="'12px'" :value="'12px'"></el-option>
          <el-option :label="'14px'" :value="'14px'"></el-option>
          <el-option :label="'16px'" :value="'16px'"></el-option>
          <el-option :label="'18px'" :value="'18px'"></el-option>
          <el-option :label="'20px'" :value="'20px'"></el-option>
          <el-option :label="'22px'" :value="'22px'"></el-option>
          <el-option :label="'24px'" :value="'24px'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="加粗" :label-width="formLabelWidth" style="margin-bottom: 0;">
        <el-select size="small" v-model="form.topFontStyle" placeholder="请选择">
          <el-option :label="'默认'" :value="null"></el-option>
          <el-option :label="'不加粗'" :value="'normal'"></el-option>
          <el-option :label="'加粗'" :value="'bolder'"></el-option>
        </el-select>
      </el-form-item>
      <el-divider content-position="left">二级菜单文字设置</el-divider>
      <el-form-item label="文字不换行" :label-width="formLabelWidth" style="margin-bottom: 0;">
        <el-radio-group v-model="form.subFontWrap">
          <el-radio size="mini" :label="0">关闭</el-radio>
          <el-radio size="mini" :label="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="group-button">
      <el-button type="primary" @click="onSubmitData" size="small">
        更 新
      </el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  created () {
    this.getData()
  },
  computed: {
    ...mapGetters(['currentSite'])
  },
  data () {
    return {
      loading: true,
      formLabelWidth: '120px',
      fontFamily: [
        { value: '宋体,SimSun', label: '宋体' },
        { value: '微软雅黑,Microsoft YaHei', label: '微软雅黑' },
        { value: '楷体,楷体_GB2312,SimKai', label: '楷体' },
        { value: '黑体,SimHei', label: '黑体' },
        { value: '隶书,SimLi', label: '隶书' },
        { value: 'andale mono', label: 'Andale Mono' },
        { value: 'arial,helvetica,sans-serif', label: 'Arial' },
        { value: 'arial black,avant garde', label: 'Arial Black' },
        { value: 'comic sans ms', label: 'Comic Sans Ms' },
        { value: 'impact,chicago', label: 'Impact,chicago' },
        { value: 'times new roman', label: 'Times New Roman' }
      ],
      form: {
        maxIndex: 2,
        topFontColor: null,
        topFontFamily: '',
        topFontSize: null,
        topFontStyle: null,
        topSelectionColor: null,
        subFontWrap: 0
      }
    }
  },
  methods: {
    getData () {
      // 请求获取技术信息数据
      if (!this.loading) {
        this.loading = true
      }
      //
      this.$post('/site/get-site-menu-config').then(response => {
        if (response && typeof response.maxIndex === 'number') {
          this.form = response
          if (typeof (response.subFontWrap) === 'undefined') {
            this.$set(this.form, 'subFontWrap', 0)
          }
        }
        this.loading = false
      })
    },
    // 请求后台
    onSubmitData () {
      this.loading = true
      let param = JSON.parse(JSON.stringify(this.form))
      this.$jpost('/baseinfo/update-site-menu-config', param).then(response => {
        if (response && typeof response.maxIndex === 'number') {
          this.form = response
          if (typeof (response.subFontWrap) === 'undefined') {
            this.$set(this.form, 'subFontWrap', 0)
          }
        }
        this.loading = false
      })
    }
  },
  components: {
  }
}
</script>
<style scoped>
.collapse-site-menu-setup .group-button {
  text-align: left;
  margin-left: 120px;
  margin-top: 18px;
}
</style>
